<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 回调地狱
        // setTimeout(() => {
        //     console.log(1)
        //     setTimeout(() => {
        //         console.log(2)
        //         setTimeout(() => {
        //             console.log(3)
        //         }, 3000)
        //     }, 2000)
        // }, 1000)

        // promise的使用
        // const p = new Promise((success, fail) => {
        //     // 这里写异步调用代码
        //     setTimeout(() => {
        //         // success('Yes')
        //         fail('No')
        //     }, 1000)
        // })

        // p.then((str1) => {
        //     console.log(str1)
        // }, (str2) => {
        //     console.log(str2)
        // })

        // Promise消除回调地狱
        // function delay(duration, num){
        //     return new Promise((success) => {
        //         setTimeout(() => {
        //             success(num)
        //         }, duration)
        //     })
        // }

        // delay(1000, 1)
        // .then((n1) => {
        //     console.log(n1)
        //     return delay(1000, 2)
        // })
        // .then((n2) => {
        //     console.log(n2)
        //     return delay(1000, 3)
        // })
        // .then((n3) => {
        //     console.log(n3)
        // })

        // Promise + await + async 的终极解决方案
        function delay(duration, num){
            return new Promise((success) => {
                setTimeout(() => {
                    success(num)
                }, duration);
            })
        }

        async function log(){
            const n1 = await delay(1000, 1)
            console.log(n1)
            const n2 = await delay(1000, 2)
            console.log(n2)
            const n3 = await delay(1000, 3)
            console.log(n3)
        }

        log()

    </script>
</body>
</html>